<template>
<ul class="pagination">
  <li :class="['pagination-previous', { disabled: !hasPrevious }]">
    <a v-if="hasPrevious" @click="handler(currentPageNum - 1)">{{ $t('common.pagination.previous') }}</a>
    <template v-if="!hasPrevious">
      {{ $t('common.pagination.previous') }}
    </template>
  </li>

  <li :class="{ current: currentPageNum === 1 }">
    <a v-if="currentPageNum !== 1" @click="handler(1)">1</a>
    <template v-if="currentPageNum === 1">1</template>
  </li>

  <template v-if="totalPageNum > 1">
    <li v-if="(currentPageNum - 3) > 1" class="ellipsis"></li>

    <template v-for="(pageNum, idx) in [currentPageNum - 2, currentPageNum - 1, currentPageNum, currentPageNum + 1, currentPageNum + 2]">
      <li v-if="pageNum < totalPageNum && pageNum > 1" :key="idx" :class="{ current: currentPageNum === pageNum }">
        <a v-if="currentPageNum !== pageNum" @click="handler(pageNum)">{{ pageNum }}</a>
        <template v-if="currentPageNum === pageNum">
          {{ pageNum }}
        </template>
      </li>
    </template>

    <li v-if="(currentPageNum + 3) < totalPageNum" class="ellipsis"></li>

    <li :class="{ current: currentPageNum === totalPageNum }">
      <a v-if="currentPageNum !== totalPageNum" @click="handler(totalPageNum)">{{ totalPageNum }}</a>
      <template v-if="currentPageNum === totalPageNum">
        {{ totalPageNum }}
      </template>
    </li>
  </template>

  <li :class="['pagination-next', { disabled: !hasNext }]">
    <a v-if="hasNext" @click="handler(currentPageNum + 1)">{{ $t('common.pagination.next') }}</a>
    <template v-if="!hasNext">
      {{ $t('common.pagination.next') }}
    </template>
  </li>
</ul>
</template>

<script>
export default {

  props: {
    totalPageNum: {
      type: Number,
      required: true
    },
    currentPageNum: {
      type: Number,
      required: true
    },
    handler: {
      type: Function,
      default: () => {}
    }
  },

  computed: {
    hasPrevious() {
      return this.currentPageNum !== 1;
    },

    hasNext() {
      return this.currentPageNum !== this.totalPageNum && [0, 1].indexOf(this.totalPageNum) === -1;
    }
  }

};
</script>
